Client-Side Events
Description
The UX Component has a number of javascript events you can hook into to do extra processing, such as caching data or validating a control.
Creating or modifying behaviors on a web page with javascript can be done with events. Events are triggered from actions initiated by the user or change of state in the UX. Some events are top-level events that belong to the UX component, such as the onRenderComplete or onInitializeBegin events. Other events apply to controls that can be placed in the UX component, such as lists, repeating sections, or data controls (text boxes, radio buttons, dropdowns, etc.) Many events are part of a larger chain of events. For example, when an ajax callback is made, Client-Side Events are called before the callback is sent to the server (canAjaxCallback) and when the callback returns from the server (afterAjaxCallbackComplete).
UX component Client-side Events are hooks that can be used to customize behavior, inject content, cache state, or add your own customizations to the component. Client-Side Events are listed in the Events section under "Client-side" in the UX component. Here you will find events for repeating sections and events for the UX component caused by state changes in the UX component's environment. Some examples of a state change in a UX component include the UX component is rendered or initialized, a login or logout event occurs in the security framework, a callback is sent or returned from the server, or data in controls on the UX component have been populated, reset, or validated.
Controls and objects placed on a UX component also have events. Most events are listed under "Javascript (Mouse, Touch, Pointer)" and "Javascript" in the control's Properties. Some controls have additional events that are specific to the type of control. For example, a textbox with a date picker will have optional events for the date picker.
The core events, "Javascript (Mouse, Touch, Pointer)" and "Javascript", are events created by device interaction: touch screens, mice, and keyboards. Older versions of Alpha Anywhere only had "Javascript" events. With more recent releases, "Javascript (Mouse, Touch, Pointer)" events were added. The only significant difference between these two sets of event are how the javascript is registered with the event handlers. "Javascript" events are registered using the HTML attribute for the control. "Javascript (Mouse, Touch, Pointer)" events are registered using $e.add(), an event register function from Alpha Anywhere's core javascript library.
You may be wondering why there are two click (click, onClick) and double-click (dblClick, onDblClick) events. The click and dblClick events are optimized to support both mobile and desktop devices. On mobile devices, the browser adds a 300ms delay to the onClick event. This delay was added so the browser could detect touch events, such as swiping. The click event does not have this delay. Alpha Anywhere automatically maps the click event to the appropriate event handler based on the user's device. On mobile devices, the click event resolves to a touch event and eliminates the 300ms delay. On a desktop computer, click resolves to a mouse click event, which has no delay.
The events listed may not be available for a control. Event availability depends on both the type of HTML element rendered for the control as well as the web application's environment (mobile phone versus a laptop computer.) A touch screen will issue both click and tap events whereas a mouse will only trigger click events. Additionally, some events are not available for all controls --- a container doesn't have a value, so the container won't have an onChange event. Therefore, it is important to consider both the context of the environment the UX component will run in as well as the type of control when working with events.